<template>
	<view class="container">
		<!-- <st-navigation title="" backgroundColor="#fff"></st-navigation> -->
		<view class="header-wrapper" v-if="user.isLogin">
			<view class="top-wrap">
				<view class="avatar">
					<!-- <image :src="$wanlshop.ossYSM(user.avatar, 60, 60, 2, 'avatar')" mode="aspectFill"></image> -->
					<StAvatar :designer="user"></StAvatar>
				</view>

				<view class="infoWrap">
					<view class="avator-info">
						<view class="name">
							{{ user.username || user.nickname || user.mobile }}
						</view>
						<uni-data-select v-if="user['is_designer'] == 1" v-model="user.is_online"
							:localdata="statusOption" @change="handleChangeOnline" :clear="false" class="login-state"
							:class="{
								'on-line-1': user.is_online == '1',
								'on-line-0': user.is_online == '0',
								'on-line-2': user.is_online == '2'
							}"></uni-data-select>
					</view>
					<view class="id_info">
						ID：{{ user.id }}
					</view>
					<view class="setting" @click="goSetting">
						<uni-icons type="gear" size="20"></uni-icons>
					</view>
				</view>
			</view>

			<view class="priceWrap" v-if="user['is_designer'] == 1">
				<view class="price">
					{{ user.despoit || '0.00' }}
				</view>
				<view class="title">
					质保金(元)
				</view>
			</view>
		</view>
		<view class="header-wrapper" v-else>
			<view class="top-wrap" @tap="$wanlshop.auth('/pages/ysmMy/ysmMy')">
				<view   class="avatar">
					<image :src="$wanlshop.ossYSM(user.avatar, 60, 60, 2, 'avatar')" mode="aspectFill"></image>
				</view>
				<!-- <view v-else  class="avatar">
					<image src="http://www.ysm.com/uploads/20240622/8e4e3ec3cde8ef7923f0efa0096ff429.jpg" mode="aspectFill"></image>
				</view> -->
				<view class="infoWrap">
					<view class="avator-info">
						<view class="name login-now">
							立即登录
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="contentWrap">
			<uni-list class="list" v-for="(item, index) of menuList" :key="index">
				<div v-for="(menu, menuIndex) of item.menu" :key="`menuIndex_${menuIndex}`">
					<template v-if="menu.type === 'collapse'">
						<!-- <uni-collapse v-if="menu.label === '我的预约' || menu.label === '我的客户'">
							<uni-collapse-item :title="menu.label" title-border="none">
								<view class="content">
									<uni-list-item title="李先生" note="2022.08.28" showArrow thumb="../../static/images/ysmHome/avatar-1.png"
										thumb-size="lg" link="navigateTo" @click="handleToMy">
									</uni-list-item>
								</view>
							</uni-collapse-item>
						</uni-collapse> -->

						<uni-collapse v-if="menu.label === '培训视频'">
							<uni-collapse-item class="video" title="培训视频" title-border="none">
								<view class="content">
									<view class="item" v-for="(video, index) of videolist" :key="index"
										@click="goVideoDetail(video, index)">
										<view class="img_wrap" v-if="!video.isAutoPlay">
											<image :src="video.video_img"></image>
											<image class="icon-play play-bg"
												src="../../static/images/ysmMall/play-1.png" mode="widthFix">
											</image>
											<image class="icon-play play-triangle"
												src="../../static/images/ysmMall/play-2.png" mode="widthFix"></image>
										</view>
										<view class="img_wrap" v-else>
											<video class="video-item" :src="video.video" enable-danmu danmu-btn controls
												:poster-for-crawler="video.video_img" :title="video.title"
												:autoplay="video.isAutoPlay" object-fit="fill"></video>
										</view>
										<view class="img_title">
											{{ video.title }}
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>

						<uni-collapse v-if="menu.label === '我的客户' || menu.label === '我的预约'">
							<uni-collapse-item :title="menu.label" title-border="none">
								<view class="content">
									<uni-list-chat v-for="(item, customer_index) in myCustomersData"
										:key="customer_index" :title="item._userName" link="navigateTo"
										:avatar-circle="true"
										:avatar="$wanlshop.ossYSM(item._userAvatar, 60, 60, 2, 'avatar')"
										:note="`预约时间：${item.timeStr}`" @click="handleToMy(item)">
									</uni-list-chat>

								</view>
							</uni-collapse-item>
						</uni-collapse>

					</template>

					<uni-list-item v-else showArrow :title="menu.label" link="navigateTo" :to="menu.path" />
				</div>
			</uni-list>
		</view>
		<view class="" style="padding-bottom:env(safe-area-inset-bottom)">
			<view class="" style="height: 60px;">
				
			</view>
		</view>
		<view class="d-flex position-fixed bottom-0 left-0 right-0 bg-white " style="padding-bottom:env(safe-area-inset-bottom);">
			<view class="flex-1 text-center" @click="selectTab(index)" 
				style="height: 50px;line-height: 50px;font-size: 36rpx;color: #B3B3B3;"
				v-for="(item,index) in tabbarList" :key="index">
				<text :class="activeTabIndex===index?'active':''" style="">{{item.label}}</text>
			</view>
			
		</view>


	</view>
</template>

<script>
	import StAvatar from '../../components/st-avatar/st-avatar.vue';

	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			StAvatar
		},
		data() {
			return {
				activeTabIndex: 2,
				tabbarList: [{
					label: '首页',

				}, {
					label: '消息',
				}, {
					label: '我'
				}],
				value: 0,
				collapseValue: '',
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],

				/* designerMenus: [
					{
						menu: [
							{
								label: '培训视频',
								path: '',
								type: 'collapse',
							},
						]
					},
					{
						menu: [
							{
								label: '我的客户',
								path: '',
								type: 'collapse',
							},
							{
								label: '我的店铺',
								path: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${item.id}`,
							},
						]
					},
					{
						menu: [
							{
								label: '我的评价',
								path: '',
							},
							{
								label: '我的积分',
								path: '',
							},
						]
					},
					{
						menu: [
							{
								label: '我的排名',
								path: '',
							},
							{
								label: '投诉建议',
								path: '/pagesYSM/ysmMy/suggestions/suggestions',
							},
						]
					},
				], */

				defaultMenus: [{
						menu: [{
							label: '我的预约',
							path: '',
							type: 'collapse',
						}]
					},
					{
						menu: [{
								label: '在线工地',
								path: '',
							},
							{
								label: '我的收藏',
								path: '/pagesYSM/ysmMy/collect/collect',
							},
						]
					},
					{
						menu: [{
								label: '账号设置',
								path: '/pagesYSM/ysmMy/setting/setting',
							},
							{
								label: '投诉建议',
								path: '/pagesYSM/ysmMy/suggestions/suggestions',
							},
						]
					},

				],

				myCustomersData: [],
				videolist: [], // 培训视频

				statusOption: [{
						value: 1,
						text: "在线"
					},
					{
						value: 0,
						text: "离线"
					},
					{
						value: 2,
						text: "约满"
					},
				],

			};
		},
		computed: {
			...mapState(['user', 'statistics', 'common']),

			designerMenus() {
				return [{
						menu: [{
							label: '培训视频',
							path: '',
							type: 'collapse',
						}, ]
					},
					{
						menu: [{
								label: '我的客户',
								path: '',
								type: 'collapse',
							},
							{
								label: '我的店铺',
								path: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${this.user.id}`,
							},
						]
					},
					{
						menu: [{
								label: '我的评价',
								path: '',
							},
							{
								label: '我的积分',
								path: '',
							},
						]
					},
					{
						menu: [{
								label: '我的排名',
								path: '',
							},
							{
								label: '投诉建议',
								path: '/pagesYSM/ysmMy/suggestions/suggestions',
							},
						]
					},
				]
			},

			menuList() {
				return this.user['is_designer'] == 1 ? this.designerMenus : this.defaultMenus
			},

			// is_online() {
			// 	// 动态改变背景 1在线 0离线 2已约满
			// 	if(this.user['is_online'] === 1) {
			// 		return '在线'
			// 	} else if(this.user['is_online'] === 0) {
			// 		return '离线'
			// 	} else if(this.user['is_online'] === 2) {
			// 		return '已约满'
			// 	}
			// },
		},
		onLoad() {
			this.getVideolist();

			if (this.user && this.user.token) {
				this.getUserList();
			}

			// if (this.user['is_designer'] == 1) {
			// } else {
			//
			// }
		},
		onShow() {
			uni.hideTabBar()
			if (this.user && this.user.token) {
				this.getUserList();
			}
		},
		onPullDownRefresh() {
			this.getUserList();
		},
		methods: {
			selectTab(index) {
				// this.activeTabIndex = index
				switch (index) {
					case 0:
						uni.switchTab({
							url: '/pages/ysmHome/ysmHome'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/lineMe/lineMe'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/ysmMy/ysmMy'
						})
						break;
				}
			},
			change(e) {
				console.log("e:", e);
			},
			handleToMy(item) {
				console.log(item);

				uni.navigateTo({
					url: '/pagesYSM/ysmMy/custom/custom?id=' + item.id
				})
			},
			handleClickMenu(menu) {
				if (menu.path) {
					this.toPage(menu.path)
				}
			},
			toPage(url) {
				this.$wanlshop.auth(url);
				// uni.navigateTo({
				// 	url,
				// })
			},
			goSuggest() {
				uni.navigateTo({
					url: '/pagesYSM/ysmMy/suggestions/suggestions'
				})
			},
			goSetting() {
				this.toPage('/pagesYSM/ysmMy/setting/setting')
			},

			async getVideolist() {
				await this.$api.get({
					url: '/wanlshop/config/getTrainVideolist',
					data: {},
					success: res => {
						this.videolist = res.map(item => {
							item.isAutoPlay = false;
							return item;
						});
						console.log(this.videolist)
					},
				});
			},
			async getVideolist1() {
				await this.$api.get({
					url: '/wanlshop/user/getVideolist',
					data: {
						cate: 1,
					},
					success: res => {
						console.log(res)
						this.videolist = res.data;
						console.log(this.videolist[0].video_img)
					},
				});
			},

			async getUserList() {
				await this.$api.get({
					url: '/wanlshop/booking/lists',
					data: {},
					success: res => {
						this.myCustomersData = res.data;

						this.myCustomersData = this.myCustomersData.map(item => {
							item['timeStr'] = this.formatDateTime(item['createtime'] * 1000);
							item['_userName'] = this.user['is_designer'] == 1 ? (item[
								'username'] || item['nickname']) : (item[
								'designer_username'] || item['designer_nickname']);
							item['_userAvatar'] = this.user['is_designer'] == 1 ? item['avatar'] :
								item['designer_avatar'];
							return item;
						})
					}
				})

				uni.stopPullDownRefresh();
			},
			// 将时间戳转换为时间 2022.08.10
			formatDate(date) {
				let date1 = new Date(date);
				let year = date1.getFullYear();
				let month = date1.getMonth() + 1;
				let day = date1.getDate();
				return year + '.' + month + '.' + day;
			},
			// 将时间戳转为时间 2022.08.10 12:00:00
			formatDateTime(date) {
				let date1 = new Date(date);
				let year = date1.getFullYear();
				let month = date1.getMonth() + 1;
				let day = date1.getDate();
				let hour = date1.getHours();
				let minute = date1.getMinutes();
				let second = date1.getSeconds();
				return year + '.' + month + '.' + day + ' ' + hour + ':' + minute + ':' + second;
			},

			//跳转视频详情
			goVideoDetail(item, index) {
				this.videolist.forEach(item => {
					this.$set(item, 'isAutoPlay', false)
				})

				this.videolist[index].isAutoPlay = !this.videolist[index].isAutoPlay;
				this.$set(this.videolist, index, this.videolist[index])

				/* let dataSource = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmVideoDetail?dataSouce=${dataSource}`
				}); */
			},

			// 点击在线 动态切换状态
			handleClickOnline() {
				console.log(this.user)
				uni.showActionSheet({
					itemList: ['离线', '在线', '已约满'],
					success: (res) => {
						console.log(this.user)
						this.user.is_online = res.tapIndex; // 1 在线 0 离线 2 已约满
						console.log(this.user.is_online);
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//
			handleChangeOnline(e) {
				this.$api.post({
					url: '/wanlshop/user/setonline',
					data: {
						is_online: e,
					},
					success: res => {
						this.user.is_online = e;
						this.$store.commit('user/setUserInfo', {
							is_online: e
						});
					}
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	@import "./ysmMy.less";

	.active {
		color: #333333;
		font-weight: bold;
	}

	/deep/ .uni-collapse-item__title-arrow {
		transform: rotate(-90deg) !important
	}

	/deep/ .uni-collapse-item__title-arrow-active {
		transform: rotate(0deg) !important
	}
</style>